import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_syt/api/api.dart';
import 'package:flutter_syt/datas/venue_item.dart';
import 'package:flutter_syt/domain/widgets/network_load_image.dart';
import 'package:flutter_syt/generated/l10n.dart';
import 'package:flutter_syt/routes.all.dart';
import 'package:flutter_syt/utils/click_utils.dart';
import 'package:flutter_syt/utils/utils_other.dart';
import 'package:flutter_syt/widgets/normal_table.dart';
import 'package:yyy_route_annotation/yyy_route_annotation.dart';

@RoutePage(name: "eyeList")
class GameLiveSinglePage extends StatefulWidget {
  var needBar = true;
  @override
  State<StatefulWidget> createState() {
    return _GameLiveSinglePageState();
  }
}

class _GameLiveSinglePageState extends State<GameLiveSinglePage> {
  NormalTableViewController _tableController = NormalTableViewController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: widget.needBar
          ? AppBar(
              title: Text(S.of(context).eye_list),
            )
          : null,
      // body: Column(
      //   children: [
      //     Expanded(
      //       child: Stack(
      //         children: [
      //           content(),
      //         ],
      //       ),
      //     ),
      //   ],
      // ),
      body: content(),
    );
  }

  Widget content() {
    return NormalTableView<VenueItem>(
      controller: _tableController,
      getData: (page) async {
        var list;
        // customShowError(status)

        try {
          list = await API.shared.game.eyeList(page);
        } catch (e) {
          await UtilsOther.showCustomShowError(e);
        }
        return list;
      },
      enableLoadMore: false,
      padding: EdgeInsets.all(10),
      itemBuilder: (context, item) {
        return Column(
          children: [
            itemWidget(item),
            Container(
              height: 10,
            ),
          ],
        );
      },
    );
  }

  Widget itemWidget(VenueItem item) {
    return GestureDetector(
      child: buildItem(item),
      onTap: ClickUtils.debounce(() {
        RouteManager.push(context, RoutMapping.eyeDetail(item.id));
      }),
    );
  }

  Widget buildItem(VenueItem item) {
    return AspectRatio(
      aspectRatio: 355.0 / 200.0,
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(12)),
        child: Stack(
          children: [
            NetworkLoadImage.loadNetworkImage(
              // CachedNetworkImage(
              // imageUrl:
              item.cover,
              fit: BoxFit.cover,
              width: double.infinity,
              height: double.infinity,
            ),
            Positioned.fill(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Container(
                    height: 90,
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                      colors: [
                        Color(0xff131313).withOpacity(0.75),
                        Color(0xff1b1b1b).withOpacity(0.41),
                        Color(0x00242424),
                      ],
                      begin: Alignment.bottomCenter,
                      end: Alignment.topCenter,
                    )),
                  ),
                ],
              ),
            ),
            Positioned.fill(
              child: Column(
                children: [
                  Spacer(),
                  Container(
                    padding: EdgeInsets.symmetric(horizontal: 15),
                    child: Row(
                      children: [
                        Container(
                          padding:
                              EdgeInsets.symmetric(horizontal: 5, vertical: 2),
                          decoration: BoxDecoration(
                            color: Color(0xfff54b46),
                            borderRadius: BorderRadius.all(Radius.circular(2)),
                          ),
                          child: Row(
                            children: [
                              RichText(
                                textAlign: TextAlign.left,
                                text: TextSpan(
                                  children: [
                                    WidgetSpan(
                                        child: Padding(
                                            padding: EdgeInsets.only(
                                                right: 4, bottom: 2),
                                            child: Image.asset(
                                              "assets/icons/game_event_live.gif",
                                              width: 14,
                                              height: 14,
                                              color: Colors.white,
                                            ))),
                                    TextSpan(
                                      text: S.of(context).live_2,
                                      style: (TextStyle(
                                        fontWeight: FontWeight.w500,
                                        fontSize: 11,
                                        color: Colors.white,
                                      )),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.symmetric(horizontal: 15, vertical: 3),
                    child: Row(
                      children: [
                        Flexible(
                          child: Text(
                            item.name,
                            style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.w500,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.symmetric(horizontal: 15),
                    child: Row(
                      children: [
                        Icon(
                          Icons.location_on_outlined,
                          color: Colors.white,
                          size: 12,
                        ),
                        Expanded(
                          child: Text(
                            item.address,
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(fontSize: 14, color: Colors.white),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    height: 15,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
